<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path=request.getContextPath()+"/";%>
<!DOCTYPE html>
<html lang="en">

<head>
    <base href="<%=path %>" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--添加bootstrap的核心css和js-->
    <link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <!--添加jquery的依赖   注意jquery的依赖要加到bootstrap的前面才能生效-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>


    <!--bootstrap table 的-->
    <link href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.2/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="js/ztree/js/jquery.ztree.core.js"></script>
    <style>
        body {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
<div class="container" style="background-color:#f3f3f4;width: 100%;">
    <!--上部分-->
    <div class="row a " style="margin-left: 0px;margin-right: 0px;">

        <div class="col-md-12" style="padding:0px;">
            <div style="height:668px; ">
                <div class="row " style="background-color:#fff;  margin: 10px 10px ;padding: 10px 0;border-radius: 10px">
                    <div class=" col-md-12">
                        <form class="form-inline" id="form1">
                            <div class="form-group" style="padding-right:8px;">
                                <label for="exampleInputName2">菜单名称</label>
                                <input type="text" name="menuName" class="form-control" id="exampleInputName2" placeholder="输入登录名">
                            </div>

                            <div class="form-group" style="padding-right:8px;">
                                <label >菜单状态</label>
                                <select class="form-control" style="width: 200px" name="status">
                                    <option value="">所有</option>
                                    <option value="1">显示</option>
                                    <option value="2">隐藏</option>

                                </select>
                            </div>

                            <div class="form-group" style="padding:8px 0px; margin-left: 10px">
                                <!--定义与作用: for属性规定label与哪个表单元素绑定-->

                                <button type="button" onclick="$.table.refresh();" class="btn btn-success" style="padding-left:8px; border-radius: 20px;"><span class="glyphicon glyphicon-search"></span>搜索</button>
                                <button type="reset" class="btn btn-warning" style="padding-left:8px; border-radius: 20px;"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                            </div>

                        </form>

                    </div>
                </div>
                <div class="row " style="background-color:#fff;  margin: 10px 10px ;padding: 10px 0;border-radius: 10px">
                    <div class="col-md-12 ztree" id="treeDemo" >

                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
<script src="js/bootstrap/rbac.js"></script>
<script src="js/layer/layer.js"></script>

<style>
    .head {
        background-color: #5e5e5e;
    }
</style>
<script>


    var zTreeObj; // 声明了树对象
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    function nodeClick(event,treeId,treeNode,clickFlag){
        // treeId为当前树的id
        // treeNode当前点击的节点信息 （部门信息）
        //点击的id
        var menuId = treeNode.id;
        var menuName=treeNode.menuName;
        parent.item(menuId,menuName);
        parent.close();

    }
    var setting = {
        data:{
            simpleData:{
                enable: true,// 使用简单数据
                idKey:"id",
                pIdKey:"parentId",
                rootPId:0
            },
            key:{
                name:'menuName'
            }
        },
        callback:{
            onClick: nodeClick
        }
    };


    var zNodes;
    // 异步请求 并默认异步执行

    $.getJSON('role/menus',function(ret){
        zNodes = ret.result;
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        zTreeObj.expandAll(true);
    })


    var flag=0;
    //折叠和展开
    function toggle(){
        flag++;
        if(flag%2==1){
            zTreeObj.expandAll(false);
        }else{
            zTreeObj.expandAll(true);
        }
    }
</script>


</html>